<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>干线协调优化平台 - 绿波路段</title>
    <link rel="stylesheet" href="../components/libs/fontawesome/6.7.2/css/all.min.css" />
    <link rel="stylesheet" href="../components/common/base.css">
    <link rel="stylesheet" href="./index.css" />
    <link rel="stylesheet" href="./greenwave-sections.css" />
</head>

<body class="bg-dark-gradient">
    <!-- 顶部导航组件 -->
    <header class="layout-header">
        <!-- Logo区域 -->
        <div class="layout-logo">
            <i class="fas fa-traffic-light logo-icon"></i>
            <span class="logo-text">干线协调优化平台</span>
        </div>
        
        <!-- 弹性空间 -->
        <div class="header-spacer"></div>
        
        <!-- 业务菜单 -->
        <nav class="header-nav">
            <a href="index.html" class="nav-item" data-action="home">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </a>
            <a href="greenwave-sections.html" class="nav-item active" data-action="sections">
                <i class="fas fa-road"></i>
                <span>绿波路段</span>
            </a>
            <a href="cal.html" class="nav-item" data-action="greenwave">
                <i class="fas fa-calculator"></i>
                <span>绿波计算</span>
            </a>
            <a href="tracking.html" class="nav-item" data-action="tracking">
                <i class="fas fa-route"></i>
                <span>绿波效果跟踪</span>
            </a>
            <a href="history.html" class="nav-item" data-action="history">
                <i class="fas fa-history"></i>
                <span>历史方案</span>
            </a>
            <a href="work.html" class="nav-item" data-action="work">
                <i class="fas fa-clipboard-list"></i>
                <span>工作记录</span>
            </a>
        </nav>
    </header>

    <!-- 主内容区域 -->
    <main class="main-content">
        <div class="sections-container">
            <!-- 页面标题区域 -->
            <header class="sections-header">
                <div class="sections-title">
                    <i class="fas fa-road"></i>
                    <h1>绿波路段</h1>
                    <span class="subtitle">管理已建绿波协调路段</span>
                </div>
                <div class="sections-stats">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-road"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">12</div>
                            <div class="stat-label">总路段数</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon success">
                            <i class="fas fa-play-circle"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">9</div>
                            <div class="stat-label">运行中</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon warning">
                            <i class="fas fa-pause-circle"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">3</div>
                            <div class="stat-label">暂停</div>
                        </div>
                    </div>
                </div>
            </header>

            <!-- 搜索筛选区域 -->
            <section class="filter-section">
                <div class="filter-container">
                    <div class="filter-group">
                        <label class="filter-label">
                            <i class="fas fa-search"></i>
                            路段搜索
                        </label>
                        <input type="text" class="filter-input" placeholder="输入路段名称或关键词">
                    </div>
                    
                    <div class="filter-group">
                        <label class="filter-label">
                            <i class="fas fa-map-marker-alt"></i>
                            所属区域
                        </label>
                        <select class="filter-select">
                            <option value="">全部区域</option>
                            <option value="sanya">三亚市区</option>
                            <option value="yazhou">崖州区</option>
                            <option value="tianya">天涯区</option>
                            <option value="jiyang">吉阳区</option>
                            <option value="haitang">海棠区</option>
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label class="filter-label">
                            <i class="fas fa-flag"></i>
                            运行状态
                        </label>
                        <select class="filter-select">
                            <option value="">全部状态</option>
                            <option value="running">运行中</option>
                            <option value="paused">暂停</option>
                            <option value="maintaining">维护中</option>
                            <option value="testing">测试中</option>
                        </select>
                    </div>

                    <div class="filter-group">
                        <label class="filter-label">
                            <i class="fas fa-sort-amount-down"></i>
                            路口数量
                        </label>
                        <select class="filter-select">
                            <option value="">全部</option>
                            <option value="small">小型(≤5个路口)</option>
                            <option value="medium">中型(6-10个路口)</option>
                            <option value="large">大型(>10个路口)</option>
                        </select>
                    </div>
                    
                    <div class="filter-actions">
                        <button class="btn btn-primary">
                            <i class="fas fa-search"></i>
                            搜索
                        </button>
                        <button class="btn btn-outline">
                            <i class="fas fa-redo"></i>
                            重置
                        </button>
                        <button class="btn btn-success">
                            <i class="fas fa-plus"></i>
                            新建路段
                        </button>
                    </div>
                </div>
            </section>

            <!-- 路段列表区域 -->
            <section class="sections-list">
                <div class="section-header">
                    <div class="section-title">
                        <i class="fas fa-list"></i>
                        绿波路段列表
                    </div>
                    <div class="section-actions">
                        <div class="view-toggle">
                            <button class="view-btn active" data-view="grid">
                                <i class="fas fa-th-large"></i>
                            </button>
                            <button class="view-btn" data-view="list">
                                <i class="fas fa-list"></i>
                            </button>
                        </div>
                        <button class="btn btn-outline">
                            <i class="fas fa-download"></i>
                            导出数据
                        </button>
                    </div>
                </div>

                <!-- 网格视图 -->
                <div class="sections-grid" id="gridView">
                    <div class="section-card">
                        <div class="card-header">
                            <div class="section-status status-running">
                                <i class="fas fa-play-circle"></i>
                                <span>运行中</span>
                            </div>
                            <!-- <div class="card-actions">
                                <button class="action-btn" title="编辑">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="action-btn" title="更多">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                            </div> -->
                        </div>
                        <div class="card-content">
                            <h3 class="section-name">振州路主干线</h3>
                            <p class="section-description">从振州路-裕民路至振州路-创业街，覆盖市区主要商业区域</p>
                            <div class="section-metrics">
                                <div class="metric">
                                    <i class="fas fa-traffic-light"></i>
                                    <span class="metric-value">8</span>
                                    <span class="metric-label">路口</span>
                                </div>
                                <div class="metric">
                                    <i class="fas fa-road"></i>
                                    <span class="metric-value">3.2km</span>
                                    <span class="metric-label">长度</span>
                                </div>
                                <div class="metric">
                                    <i class="fas fa-chart-line"></i>
                                    <span class="metric-value">86%</span>
                                    <span class="metric-label">效率</span>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="section-info">
                                <span class="created-date">创建: 2024-01-10</span>
                                <span class="last-updated">更新: 2小时前</span>
                            </div>
                            <!-- <button class="btn btn-primary btn-sm">
                                <i class="fas fa-eye"></i>
                                查看详情
                            </button> -->
                        </div>
                    </div>

                    <div class="section-card">
                        <div class="card-header">
                            <div class="section-status status-running">
                                <i class="fas fa-play-circle"></i>
                                <span>运行中</span>
                            </div>
                            <!-- <div class="card-actions">
                                <button class="action-btn" title="编辑">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="action-btn" title="更多">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                            </div> -->
                        </div>
                        <div class="card-content">
                            <h3 class="section-name">迎宾路协调段</h3>
                            <p class="section-description">迎宾路主要路段，连接机场与市区的重要通道</p>
                            <div class="section-metrics">
                                <div class="metric">
                                    <i class="fas fa-traffic-light"></i>
                                    <span class="metric-value">6</span>
                                    <span class="metric-label">路口</span>
                                </div>
                                <div class="metric">
                                    <i class="fas fa-road"></i>
                                    <span class="metric-value">2.8km</span>
                                    <span class="metric-label">长度</span>
                                </div>
                                <div class="metric">
                                    <i class="fas fa-chart-line"></i>
                                    <span class="metric-value">82%</span>
                                    <span class="metric-label">效率</span>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="section-info">
                                <span class="created-date">创建: 2024-01-08</span>
                                <span class="last-updated">更新: 1天前</span>
                            </div>
                            <!-- <button class="btn btn-primary btn-sm">
                                <i class="fas fa-eye"></i>
                                查看详情
                            </button> -->
                        </div>
                    </div>

                    <div class="section-card">
                        <div class="card-header">
                            <div class="section-status status-paused">
                                <i class="fas fa-pause-circle"></i>
                                <span>暂停</span>
                            </div>
                            <!-- <div class="card-actions">
                                <button class="action-btn" title="编辑">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="action-btn" title="更多">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                            </div> -->
                        </div>
                        <div class="card-content">
                            <h3 class="section-name">凤凰路沿线</h3>
                            <p class="section-description">凤凰路沿线路口协调，包含重要景区入口</p>
                            <div class="section-metrics">
                                <div class="metric">
                                    <i class="fas fa-traffic-light"></i>
                                    <span class="metric-value">5</span>
                                    <span class="metric-label">路口</span>
                                </div>
                                <div class="metric">
                                    <i class="fas fa-road"></i>
                                    <span class="metric-value">2.1km</span>
                                    <span class="metric-label">长度</span>
                                </div>
                                <div class="metric">
                                    <i class="fas fa-chart-line"></i>
                                    <span class="metric-value">--</span>
                                    <span class="metric-label">效率</span>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="section-info">
                                <span class="created-date">创建: 2024-01-05</span>
                                <span class="last-updated">更新: 3天前</span>
                            </div>
                            <!-- <button class="btn btn-warning btn-sm">
                                <i class="fas fa-play"></i>
                                启动运行
                            </button> -->
                        </div>
                    </div>

                    <div class="section-card">
                        <div class="card-header">
                            <div class="section-status status-running">
                                <i class="fas fa-play-circle"></i>
                                <span>运行中</span>
                            </div>
                            <!-- <div class="card-actions">
                                <button class="action-btn" title="编辑">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="action-btn" title="更多">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                            </div> -->
                        </div>
                        <div class="card-content">
                            <h3 class="section-name">榆亚路干线</h3>
                            <p class="section-description">榆亚路主要干线，连接各大商业中心</p>
                            <div class="section-metrics">
                                <div class="metric">
                                    <i class="fas fa-traffic-light"></i>
                                    <span class="metric-value">12</span>
                                    <span class="metric-label">路口</span>
                                </div>
                                <div class="metric">
                                    <i class="fas fa-road"></i>
                                    <span class="metric-value">4.5km</span>
                                    <span class="metric-label">长度</span>
                                </div>
                                <div class="metric">
                                    <i class="fas fa-chart-line"></i>
                                    <span class="metric-value">88%</span>
                                    <span class="metric-label">效率</span>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="section-info">
                                <span class="created-date">创建: 2023-12-28</span>
                                <span class="last-updated">更新: 4小时前</span>
                            </div>
                            <!-- <button class="btn btn-primary btn-sm">
                                <i class="fas fa-eye"></i>
                                查看详情
                            </button> -->
                        </div>
                    </div>

                    <div class="section-card">
                        <div class="card-header">
                            <div class="section-status status-running">
                                <i class="fas fa-play-circle"></i>
                                <span>运行中</span>
                            </div>
                            <!-- <div class="card-actions">
                                <button class="action-btn" title="编辑">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="action-btn" title="更多">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                            </div> -->
                        </div>
                        <div class="card-content">
                            <h3 class="section-name">胜利路协调段</h3>
                            <p class="section-description">胜利路沿线路口，重要的南北向通道</p>
                            <div class="section-metrics">
                                <div class="metric">
                                    <i class="fas fa-traffic-light"></i>
                                    <span class="metric-value">7</span>
                                    <span class="metric-label">路口</span>
                                </div>
                                <div class="metric">
                                    <i class="fas fa-road"></i>
                                    <span class="metric-value">2.9km</span>
                                    <span class="metric-label">长度</span>
                                </div>
                                <div class="metric">
                                    <i class="fas fa-chart-line"></i>
                                    <span class="metric-value">84%</span>
                                    <span class="metric-label">效率</span>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="section-info">
                                <span class="created-date">创建: 2023-12-25</span>
                                <span class="last-updated">更新: 6小时前</span>
                            </div>
                            <!-- <button class="btn btn-primary btn-sm">
                                <i class="fas fa-eye"></i>
                                查看详情
                            </button> -->
                        </div>
                    </div>

                    <div class="section-card">
                        <div class="card-header">
                            <div class="section-status status-testing">
                                <i class="fas fa-flask"></i>
                                <span>测试中</span>
                            </div>
                            <!-- <div class="card-actions">
                                <button class="action-btn" title="编辑">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="action-btn" title="更多">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                            </div> -->
                        </div>
                        <div class="card-content">
                            <h3 class="section-name">科技城路试验段</h3>
                            <p class="section-description">新建科技城路段，正在进行绿波协调测试</p>
                            <div class="section-metrics">
                                <div class="metric">
                                    <i class="fas fa-traffic-light"></i>
                                    <span class="metric-value">4</span>
                                    <span class="metric-label">路口</span>
                                </div>
                                <div class="metric">
                                    <i class="fas fa-road"></i>
                                    <span class="metric-value">1.8km</span>
                                    <span class="metric-label">长度</span>
                                </div>
                                <div class="metric">
                                    <i class="fas fa-chart-line"></i>
                                    <span class="metric-value">--</span>
                                    <span class="metric-label">效率</span>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="section-info">
                                <span class="created-date">创建: 2024-01-15</span>
                                <span class="last-updated">更新: 30分钟前</span>
                            </div>
                            <!-- <button class="btn btn-info btn-sm">
                                <i class="fas fa-cog"></i>
                                配置测试
                            </button> -->
                        </div>
                    </div>
                </div>

                <!-- 分页器 -->
                <div class="pagination-section">
                    <div class="pagination-info">
                        显示 1-6 条，共 12 条绿波路段
                    </div>
                    <div class="pagination-controls">
                        <button class="pagination-btn disabled">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <button class="pagination-btn active">1</button>
                        <button class="pagination-btn">2</button>
                        <button class="pagination-btn">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </section>
        </div>
    </main>

</body>

</html> 